import * as React from 'react';
import { Link, RouteComponentProps, hashHistory } from 'react-router';
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
const { Header, Content, Footer } = Layout;
import { removeToken } from '../service/Auth'
import { currUser } from "../model/CurrUserModel";

const SubMenu = Menu.SubMenu;

export class Main extends React.Component<RouteComponentProps<any, any>, any> {

    state = {
        collapsed: false,
        defaultSelectedKeys: this.getDefaultSelectedKeys(),
    };

    private getDefaultSelectedKeys() {
        if (!this.props.routes[1]) {
            return [];
        }
        return [this.props.routes[1].path];
    }

    private onCollapseChange = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    private onSelect = ({key}) => {
        switch (key) {
            case "content":
                hashHistory.push('/content');
                break;
            case "data":
                hashHistory.push('/content');
                break;
            case "setting":
                hashHistory.push('/setting');
                break;
        }
    }

    private logout = () => {
        removeToken();
        location.reload();
    }

    render() {
        const collapse = this.state.collapsed;
        return <div className={collapse ? "layout-aside layout-aside-collapse" : "layout-aside"}>
            <aside className="layout-sider">
                <div className="layout-logo"></div>
                <Menu mode="inline" theme="dark" defaultSelectedKeys={this.state.defaultSelectedKeys} onSelect={this.onSelect}>
                    <Menu.Item key="content">
                        <Icon type="folder" />
                        {!collapse && <span>内容</span>}
                    </Menu.Item>
                    {/*<Menu.Item key="data">
                        <Icon type="area-chart" />
                        {!collapse && <span>数据</span>}
                    </Menu.Item>*/}
                    <Menu.Item key="setting">
                        <Icon type="user" />
                        {!collapse && <span>设置</span>}
                    </Menu.Item>
                </Menu>
                <div className="aside-action" onClick={this.onCollapseChange}>
                    {collapse ? <Icon type="right" /> : <Icon type="left" />}
                </div>
            </aside>
            <div className="layout-main">
                <div className="layout-header">
                    {/*<Menu className="header-menu" theme="light" mode="horizontal"
                          style={{ lineHeight: '64px', float: 'right' }} >
                        <SubMenu style={{ float: 'right' }}
                                 title={<span><Icon type="user" />{currUser.login}</span>} >
                            <Menu.Item key="logout">
                                <a onClick={this.logout}>注销</a>
                            </Menu.Item>
                        </SubMenu>
                    </Menu>*/}
                    <h1>私享圈 | 媒体后台</h1>
                    <div className="username"><Icon type="user" />{currUser.login}</div>
                    <Button type="primary" onClick={this.logout}>退出登录</Button>
                </div>
                <div className="layout-container">
                    {this.props.children}
                </div>
                <div className="layout-footer">
                    xhouse admin.
                </div>
            </div>
        </div>
    }
}
